<template>
  <div @wheel="handleWheel">

    <header class="header  flex-row" :class="{ play: isplay, showWhite: isShowWhite || route.name === 'article-id' || route.name === 'project-id' }">
      <div class="navBox  flex-row-bet-center">
        <NuxtLink to="/" class="websiteTitle  f-b  mr-20 one-line-hide">
          <!-- {{ settingData.setting.company.name }} -->
        </NuxtLink>
        <div class="right flex-row">
          <nav class="mr-21">
            <ul>
              <li :class="route.path === '/' ? 'active' : ''">
                <NuxtLink to="/" :class="{ play: isplay }">网站首页</NuxtLink>
              </li>
              <li v-for="item in navigation" :key="item.id" :class="route.path === item.value ? 'active' : ''">
                <nuxt-link :to="item.value" :class="{ play: isplay }">{{ item.name }}</nuxt-link>
              </li>
            </ul>
          </nav>
          <div class="flex-row">
            <img class="dis-block img1" src="@/assets/images/phone.png" alt="" />
            <span class="txt2 "> {{ settingData.setting.company.tel }}</span>
          </div>
        </div>

      </div>

    </header>
    <header class="headerPhone flex-row-bet-center ">
      <NuxtLink to="/" class="websiteTitle  f-b col-3 mr-20" @click="isCollapsed = false">
        {{ settingData.setting.company.name }}
      </NuxtLink>
      <div class="navbar-toggle" :class="{ collapsed: isCollapsed }" @click="isCollapsed = !isCollapsed">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </div>
      <ul class="nav" :class="{ collapsed: isCollapsed }">
        <li v-for="item in navigation" :key="item.id" class="item" @click="isCollapsed = false">
          <nuxt-link :to="item.value" class=" flex-row-bet-center">
            <span>{{ item.name }}</span>
            <el-icon color="#333">
              <ElIconArrowRight />
            </el-icon>
          </nuxt-link>
        </li>
      </ul>
    </header>

    <div class="header__height__placeholder" v-if="route.name === 'article-id' || route.name === 'project-id'"></div>
    <el-config-provider :locale="zhCn">

      <slot />
    </el-config-provider>
    <Footer v-if="route.path !== '/'"></Footer>

  </div>
</template>

<script setup lang="js">
import config from "@/app/config";
import serverRequest from '~/composables/useServerRequest';
import clientRequest from '~/composables/useClientRequest';
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { getDimensionaArr } from "@/utils/tool";
import FingerprintJS from '@fingerprintjs/fingerprintjs';
import Footer from "@/components/Footer";
import { debounce } from "@/utils/tool";
const route = useRoute();
onMounted(() => {
  setTimeout(() => {
    layoutsData.isplay = false
  }, 500)
  window.addEventListener('scroll', handleScroll);
  window.addEventListener('resize', handleResize);
  // 初始化 FingerprintJS
  
});

 

const settingData = await serverRequest.get('home/setting');
const newLinkList = computed(() => {
  const linkList = settingData.linkList
  return getDimensionaArr(linkList, 4);
});
useSeoMeta({
  title: `${settingData.setting.seo.title}`,
  ogTitle: `${settingData.setting.seo.title}`,
  keywords:`${settingData.setting.seo.keywords}`,
  description:`${settingData.setting.seo.description}`,
  ogDescription: `${settingData.setting.seo.description}`,
  ogSiteName:`${settingData.setting.seo.title}`
  })

watchEffect(() => {
const name = route.name
if(process.client){
  const fpPromise = FingerprintJS.load();
  // 使用生成的指纹
  fpPromise
    .then(fp => fp.get())
    .then(result => {
      const visitorId = result.visitorId; // 获取用户的指纹
      clientRequest.post('home/visit',{
        form:{
          page_url:name || 'home',
          visitor_id:visitorId
        }
      })
        .then((result) => {
         
        })
        .catch((err) => { })
        .finally(() => {
        
        });
     
    })
    .catch(error => {
      
    });
}


});
// 在组件卸载前移除事件监听器
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

function handleWheel(event){
  // if(route.path === '/location' || route.path === '/aboutUs'){
  //   return
  // }
    const deltaY = event.deltaY;
    // 根据delta值进行操作
    if (deltaY > 0) {
      if(window.scrollY === 0&&window.innerWidth > 768){
        debounce(scrollToNext,1000)()
      }
    } 
}
// 滚动区域的引用
function scrollToNext(){
  window.scrollTo({ top: window.innerHeight - 90, behavior: 'smooth' });
}
function handleScroll() {
  const scrollY = window.scrollY
  if (scrollY > 100) {
    layoutsData.isShowWhite = true
    layoutsData.isplay = true
  } else {
    layoutsData.isShowWhite = false
    layoutsData.isplay = false
  }
  
}

const layoutsData = reactive({
  navigation: [
    {
      name: "区位",
      value: "/location",
      id: 1,
    },
    {
      name: "景观",
      value: "/landscape",
      id: 2,
    },
    {
      name: "设计",
      value: "/design",
      id: 3,
    },
    {
      name: "品质",
      value: "/quality",
      id: 4,
    },
    {
      name: "服务",
      value: "/service",
      id: 5,
    },
    {
      name: "动态",
      value: "/dynamic",
      id: 6,
    },
    {
      name: "关于我们",
      value: "/aboutUs",
      id: 7

    },
  ],
  isplay: true,
  isCollapsed: false,
  isShowWhite: false,
  windowWidth:window?.innerWidth || 0
});
const { navigation, isplay, isCollapsed, isShowWhite } = toRefs(layoutsData);
// 窗口大小变化时更新宽度
const handleResize = () => {
  layoutsData.windowWidth = window.innerWidth;
};
provide("layoutsData", layoutsData);

</script>

<style lang="scss">
@use "./default.scss";
</style>
